<template>
  <div class="dark-theme-wrapper">
    <!-- Enhanced Animated Background with More Particles -->
    <div class="animated-background">
      <!-- Enhanced Particles Container -->
      <div class="particles-container">
        <!-- Original floating particles -->
        <div v-for="i in 50" :key="`particle-${i}`" class="particle" :style="getParticleStyle(i)"></div>

        <!-- Additional small twinkling particles -->
        <div v-for="i in 80" :key="`twinkle-${i}`" class="twinkle-particle" :style="getTwinkleStyle(i)"></div>

        <!-- Larger drifting particles -->
        <div v-for="i in 30" :key="`drift-${i}`" class="drift-particle" :style="getDriftStyle(i)"></div>

        <!-- Connecting line particles -->
        <div v-for="i in 15" :key="`line-${i}`" class="line-particle" :style="getLineStyle(i)"></div>

        <!-- Pulsing dot particles -->
        <div v-for="i in 25" :key="`pulse-${i}`" class="pulse-particle" :style="getPulseStyle(i)"></div>
      </div>

      <div class="floating-shapes">
      </div>
      <div class="gradient-orbs">
        <div class="orb orb-1"></div>
        <div class="orb orb-2"></div>
        <div class="orb orb-3"></div>
      </div>
    </div>

    <!-- Hero Section with Interactive Elements -->
    <section class="hero-section" ref="heroSection">
      <div class="hero-content">
        <div class="hero-text" >
          <div class="hero-badge">
            <span class="badge-icon"><Sparkles size="14" /></span>
            <span class="badge-text">AI驱动 · 智能职场 · 未来已来</span>
          </div>
          <h1 class="hero-title">
            <span class="gradient-text">AI驱动的</span>
            <br>
            <span class="typing-text" ref="typingText">职业发展平台</span>
          </h1>
          <p class="hero-subtitle">
            利用人工智能技术，为您提供个性化的简历优化、面试训练和职业规划服务
          </p>

          <!-- Stats Counter -->
          <div class="hero-stats">
            <div v-for="(stat, index) in stats" :key="stat.label" class="stat-item">
              <div class="stat-number">
                <CountUp :end-val="parseFloat(stat.number)" :duration="2.5" :options="countUpOptions" />{{ isNaN(parseFloat(stat.number)) ? stat.number : '' }}
              </div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
          </div>

          <!-- Hero CTA -->
          <div class="hero-cta">
            <button class="primary-hero-btn" @click="scrollToSection('carousel-section')">
              <span>探索服务</span>
              <ChevronDown size="16" class="btn-icon" />
            </button>
            <button class="secondary-hero-btn" @click="openDemoVideo">
              <Play size="16" class="play-icon" />
              <span>立即开始</span>
            </button>
          </div>
        </div>

        <div class="hero-visual" v-motion :initial="{ opacity: 0, scale: 0.8 }" :enter="{ opacity: 1, scale: 1, transition: { delay: 500, duration: 800 } }">
          <div class="hero-3d-container">
            <div class="floating-card">
              <Brain class="brain-icon" size="48" />
              <div class="pulse-ring"></div>
            </div>
            <div class="floating-elements">
              <div class="floating-element element-1">
                <FileText size="24" />
                <div class="element-pulse"></div>
              </div>
              <div class="floating-element element-2">
                <Users size="24" />
                <div class="element-pulse"></div>
              </div>
              <div class="floating-element element-3">
                <BarChart size="24" />
                <div class="element-pulse"></div>
              </div>
              <div class="floating-element element-4">
                <Lightbulb size="24" />
                <div class="element-pulse"></div>
              </div>
            </div>
            <div class="connection-lines"></div>
          </div>
        </div>
      </div>

      <div class="scroll-indicator" @click="scrollToSection('carousel-section')">
        <div class="mouse">
          <div class="wheel"></div>
        </div>
        <div class="scroll-text">向下滚动</div>
      </div>
    </section>

    <!-- Main Carousel Section -->
    <section id="carousel-section" class="carousel-section" ref="carouselSection">
      <div class="section-header" v-motion :initial="{ opacity: 0, y: 50 }" :visible="{ opacity: 1, y: 0, transition: { duration: 800 } }">
        <div class="section-badge">核心能力</div>
        <h2 class="section-title">核心服务</h2>
        <p class="section-subtitle">专业的AI工具助力您的职业发展</p>
      </div>

      <div class="carousel-container" v-motion :initial="{ opacity: 0 }" :visible="{ opacity: 1, transition: { delay: 300, duration: 800 } }">
        <el-carousel
            :height="carouselHeight"
            motion-blur
            indicator-position="outside"
            class="custom-carousel"
            :autoplay="true"
            :interval="5000"
            arrow="always"
            :initial-index="activeCarouselIndex"
            @change="handleCarouselChange"
        >
          <el-carousel-item v-for="(item, key) in services" :key="key" class="carousel-item">
            <router-link :to="item.url" class="carousel-link">
              <div class="carousel-content" :class="`service-${key + 1}`">
                <div class="service-card">
                  <div class="card-header">
                    <div class="icon-container">
                      <component :is="item.icon" size="48" class="service-icon" />
                      <div class="icon-glow"></div>
                    </div>
                    <div class="service-badge">{{ item.badge }}</div>
                  </div>

                  <div class="card-body">
                    <h3 class="service-title">{{ item.header }}</h3>
                    <p class="service-description">{{ item.content }}</p>

                    <div class="feature-list">
                      <div v-for="(feature, idx) in item.features" :key="feature"
                           class="feature-item"
                           :style="{ animationDelay: `${idx * 0.1}s` }">
                        <Check size="16" class="check-icon" />
                        <span>{{ feature }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="card-footer">
                    <button class="explore-button">
                      <span>立即体验</span>
                      <ArrowRight class="button-icon" size="16" />
                    </button>
                  </div>
                </div>

                <!-- Decorative Elements -->
                <div class="decorative-elements">
                  <div class="floating-icons">
                    <Sparkles class="sparkle" size="20" />
                    <Star class="star" size="16" />
                    <Zap class="zap" size="18" />
                  </div>
                </div>
              </div>
            </router-link>
          </el-carousel-item>
        </el-carousel>

        <!-- Carousel Navigation -->
        <div class="carousel-nav">
          <div v-for="(item, index) in services" :key="`nav-${index}`"
               class="carousel-nav-item"
               :class="{ active: activeCarouselIndex === index }"
               @click="setCarouselIndex(index)">
            <component :is="item.icon" size="20" class="nav-icon" />
            <span class="nav-text">{{ item.header }}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Grid with Animation -->
    <section class="features-section" ref="featuresSection">
      <div class="container">
        <div class="section-header" v-motion :initial="{ opacity: 0, y: 50 }" :visible="{ opacity: 1, y: 0, transition: { duration: 800 } }">
          <div class="section-badge">我们的优势</div>
          <h2 class="section-title">为什么选择我们</h2>
          <p class="section-subtitle">我们提供全方位的职业发展解决方案</p>
        </div>

        <div class="features-grid">
          <div v-for="(feature, index) in additionalFeatures" :key="feature.title"
               class="feature-card"
               v-motion
               :initial="{ opacity: 0, y: 50 }"
               :visible="{ opacity: 1, y: 0, transition: { delay: index * 100, duration: 600 } }">
            <div class="feature-icon">
              <component :is="feature.icon" size="32" />
            </div>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-description">{{ feature.description }}</p>
            <div class="feature-hover-effect"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- Testimonials with Improved Design -->
    <section class="testimonials-section" ref="testimonialsSection">
      <div class="container">
        <div class="section-header" v-motion :initial="{ opacity: 0, y: 50 }" :visible="{ opacity: 1, y: 0, transition: { duration: 800 } }">
          <div class="section-badge">用户心声</div>
          <h2 class="section-title">用户评价</h2>
          <p class="section-subtitle">听听他们怎么说</p>
        </div>

        <div class="testimonials-slider" v-motion :initial="{ opacity: 1, y: 50 }" :visible="{ opacity: 1,y:0, transition: { delay: 300, duration: 800 } }">
          <el-carousel
              :height="'400px'"
              :autoplay="true"
              :interval="6000"
              indicator-position="none"
              arrow="always"
              type="card"
              class="testimonial-carousel"
          >
            <el-carousel-item v-for="(testimonial, index) in testimonials" :key="`testimonial-${index}`">
              <div class="testimonial-card">
                <div class="testimonial-rating">
                  <Star v-for="i in 5" :key="`star-${i}`" size="16" class="star-icon" :class="{ 'filled': i <= testimonial.rating }" />
                </div>
                <div class="testimonial-content">
                  <Quote class="quote-icon" size="24" />
                  <p class="testimonial-text">{{ testimonial.text }}</p>
                </div>
                <div class="testimonial-author">
                  <div class="author-avatar">
                    <User size="24" />
                  </div>
                  <div class="author-info">
                    <div class="author-name">{{ testimonial.name }}</div>
                    <div class="author-role">{{ testimonial.role }}</div>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </section>

    <!-- Enhanced CTA Section -->
    <section class="cta-section" ref="ctaSection">
      <div class="cta-content" v-motion :initial="{ opacity: 0, y: 50 }" :visible="{ opacity: 1, y: 0, transition: { duration: 800 } }">
        <h2 class="cta-title">准备开始您的职业提升之旅？</h2>
        <p class="cta-subtitle">加入数万名用户，体验AI驱动的职业发展服务</p>
        <div class="cta-buttons">
          <button class="primary-cta" @click="scrollToTop">
            <Rocket size="20" />
            <span>免费开始</span>
          </button>
          <button class="secondary-cta" @click="scrollToSection('footer')">
            <MessageCircle size="20" />
            <span>联系我们</span>
          </button>
        </div>

      </div>
    </section>
    <section id="footer">
      <Footer/>
    </section>
    <!-- Video Modal -->
    <el-dialog
        v-model="showVideoModal"
        title="产品演示视频"
        width="80%"
        class="video-modal"
        :before-close="closeVideoModal"
        destroy-on-close
    >
      <div class="video-container">
        <div class="video-placeholder">
          <Play size="64" class="play-icon-large" />
          <p>演示视频加载中...</p>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script setup>
import Footer from "@/components/common/footer.vue";
import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
import CountUp from 'vue-countup-v3';
import { MotionDirective as motion } from '@vueuse/motion'
const vMotion = motion()

import {
  FileText, Users, BarChart, ArrowRight, Check, Play, Brain, Sparkles,
  Star, Zap, Shield, Clock, Target, Lightbulb, Quote, User, Rocket,
  MessageCircle, ChevronDown
} from 'lucide-vue-next';

// Reactive state
const carouselHeight = ref('600px');
const activeCarouselIndex = ref(0);
const emailInput = ref('');
const showVideoModal = ref(false);
const showSuccessModal = ref(false);
const typingTextElement = ref(null);
const heroSection = ref(null);
const carouselSection = ref(null);
const featuresSection = ref(null);
const statsSection = ref(null);
const testimonialsSection = ref(null);
const ctaSection = ref(null);

// Computed properties
const isValidEmail = computed(() => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(emailInput.value);
});

// CountUp options
const countUpOptions = {
  useEasing: true,
  useGrouping: true,
  separator: ',',
  decimal: '.',
};

// Services data
const services = [
  {
    icon: FileText,
    header: "智能简历工厂",
    content: "基于AI技术的个性化简历生成与优化系统，提升您的求职竞争力",
    badge: "热门",
    features: ["AI智能分析", "个性化定制", "实时优化建议", "多模板选择"],
    metrics: { users: "50K", success: "95" },
    url: "/resume_create"
  },
  {
    icon: Users,
    header: "虚拟面试战场",
    content: "真实场景模拟，提升面试技能和自信心，让您从容应对各类面试",
    badge: "推荐",
    features: ["真实场景模拟", "AI面试官", "实时反馈", "技能评估"],
    metrics: { users: "30K", success: "92" },
    url: "/interview"
  },
  {
    icon: BarChart,
    header: "面试诊疗中心",
    content: "深度分析面试表现，制定个性化提升方案，助您突破职场瓶颈",
    badge: "专业",
    features: ["深度分析", "个性化方案", "进度跟踪", "专家指导"],
    metrics: { users: "25K", success: "88" },
    url: "/diagnosis"
  },
];

// Stats data
const stats = [
  { number: "100+", label: "注册用户" },
  { number: "95%", label: "满意度" },
  { number: "10K+", label: "生成简历" },
  { number: "5000+", label: "面试场次" },
];

// Features data
const additionalFeatures = [
  {
    icon: Shield,
    title: "数据安全",
    description: "企业级安全保护，确保您的个人信息安全"
  },
  {
    icon: Clock,
    title: "快速响应",
    description: "AI技术支持，秒级响应您的需求"
  },
  {
    icon: Target,
    title: "精准匹配",
    description: "智能算法精准匹配岗位需求"
  },
  {
    icon: Lightbulb,
    title: "持续创新",
    description: "不断更新的AI模型和功能"
  }
];

// Enhanced testimonials with ratings
const testimonials = [
  {
    name: "何启荣",
    role: "软件工程师",
    text: "通过AI简历优化，我成功获得了心仪公司的offer，面试通过率提升了80%！系统给出的建议非常专业，帮我突出了技术亮点。",
    rating: 5
  },
  {
    name: "张温宇翔",
    role: "产品经理",
    text: "虚拟面试训练让我在真实面试中更加自信，表现更加出色。AI面试官的问题很有针对性，完全模拟了真实面试场景。",
    rating: 5
  },
  {
    name: "武易",
    role: "市场专员",
    text: "详细的面试分析报告帮助我发现了自己的不足，针对性改进效果显著。特别是非语言表达方面的建议非常实用。",
    rating: 4
  }
];

// Enhanced Animation and style functions
const getShapeStyle = (index) => {
  const size = Math.random() * 100 + 50;
  const left = Math.random() * 100;
  const animationDelay = Math.random() * 20;
  const animationDuration = Math.random() * 10 + 10;

  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${left}%`,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  };
};

const getParticleStyle = (index) => {
  const size = Math.random() * 4 + 1;
  const left = Math.random() * 100;
  const top = Math.random() * 100;
  const animationDelay = Math.random() * 5;
  const animationDuration = Math.random() * 20 + 10;
  const opacity = Math.random() * 0.5 + 0.1;

  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${left}%`,
    top: `${top}%`,
    opacity: opacity,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  };
};

// New particle style functions
const getTwinkleStyle = (index) => {
  const size = Math.random() * 2 + 0.5;
  const left = Math.random() * 100;
  const top = Math.random() * 100;
  const animationDelay = Math.random() * 3;
  const animationDuration = Math.random() * 4 + 2;

  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${left}%`,
    top: `${top}%`,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  };
};

const getDriftStyle = (index) => {
  const size = Math.random() * 8 + 3;
  const left = Math.random() * 100;
  const top = Math.random() * 100;
  const animationDelay = Math.random() * 10;
  const animationDuration = Math.random() * 30 + 20;
  const opacity = Math.random() * 0.3 + 0.1;

  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${left}%`,
    top: `${top}%`,
    opacity: opacity,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  };
};

const getLineStyle = (index) => {
  const width = Math.random() * 100 + 50;
  const height = Math.random() * 2 + 1;
  const left = Math.random() * 100;
  const top = Math.random() * 100;
  const rotation = Math.random() * 360;
  const animationDelay = Math.random() * 8;
  const animationDuration = Math.random() * 15 + 10;

  return {
    width: `${width}px`,
    height: `${height}px`,
    left: `${left}%`,
    top: `${top}%`,
    transform: `rotate(${rotation}deg)`,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  };
};

const getPulseStyle = (index) => {
  const size = Math.random() * 6 + 2;
  const left = Math.random() * 100;
  const top = Math.random() * 100;
  const animationDelay = Math.random() * 4;
  const animationDuration = Math.random() * 3 + 2;

  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${left}%`,
    top: `${top}%`,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  };
};

// Carousel functions
const handleCarouselChange = (index) => {
  activeCarouselIndex.value = index;
};

const setCarouselIndex = (index) => {
  activeCarouselIndex.value = index;
};

// Modal functions
const openDemoVideo = () => {
  showVideoModal.value = true;
};

const closeVideoModal = () => {
  showVideoModal.value = false;
};

// Scroll functions
const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
};
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// Typing animation
const startTypingAnimation = () => {
  if (!typingTextElement.value) return;

  const text = "职业发展平台";
  const element = typingTextElement.value;
  element.textContent = "";

  let i = 0;
  const typeInterval = setInterval(() => {
    if (i < text.length) {
      element.textContent += text.charAt(i);
      i++;
    } else {
      clearInterval(typeInterval);
    }
  }, 100);
};

// Lifecycle hooks
const updateHeight = () => {
  carouselHeight.value = Math.max(600, window.innerHeight * 0.6) + 'px';
};

onMounted(() => {
  // Update carousel height on resize
  updateHeight();
  window.addEventListener('resize', updateHeight);

  // Start typing animation
  nextTick(() => {
    startTypingAnimation();
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', updateHeight);
});
</script>

<style scoped>
.dark-theme-wrapper {
  padding-top: 100px;
  background-color: #0a0a0a;
  color: #f5f5f5;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

/* Animated Background */
.animated-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.particles-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  background-color: rgba(147, 51, 234, 0.4);
  border-radius: 50%;
  animation: float-particle infinite linear;
}

@keyframes float-particle {
  0% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-20px) translateX(10px); }
  50% { transform: translateY(0) translateX(20px); }
  75% { transform: translateY(20px) translateX(10px); }
  100% { transform: translateY(0) translateX(0); }
}

.floating-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  background: linear-gradient(45deg, rgba(147, 51, 234, 0.1), rgba(192, 132, 252, 0.1));
  border-radius: 50%;
  animation: float infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.gradient-orbs {
  position: absolute;
  width: 100%;
  height: 100%;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  animation: pulse 4s ease-in-out infinite;
}

.orb-1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.orb-2 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.2) 0%, transparent 70%);
  top: 60%;
  right: 20%;
  animation-delay: 2s;
}

.orb-3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, transparent 70%);
  bottom: 20%;
  left: 50%;
  animation-delay: 1s;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

/* Hero Section */
.hero-section {
  padding: 6rem 2rem 8rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(147, 51, 234, 0.1);
  border: 1px solid rgba(147, 51, 234, 0.2);
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: #c084fc;
}

.badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.gradient-text {
  background: linear-gradient(90deg, #9333ea, #c084fc, #e879f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.typing-text {
  color: #f5f5f5;
  position: relative;
}



@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero-subtitle {
  font-size: 1.25rem;
  color: #a3a3a3;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #9333ea;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  color: #a3a3a3;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.primary-hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: linear-gradient(90deg, #9333ea, #c084fc);
  color: white;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.primary-hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(147, 51, 234, 0.3);
}

.btn-icon {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.secondary-hero-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-hero-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.play-icon {
  color: #9333ea;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-3d-container {
  position: relative;
  width: 100%;
  height: 400px;
}

.floating-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
  border-radius: 2rem;
  padding: 3rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: float 6s ease-in-out infinite;
  z-index: 2;
}

.brain-icon {
  color: #9333ea;
  z-index: 2;
  position: relative;
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 2px solid #9333ea;
  border-radius: 50%;
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.floating-element {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(147, 51, 234, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9333ea;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.element-1 {
  top: 20%;
  left: 20%;
  animation: float-element 8s ease-in-out infinite;
}

.element-2 {
  top: 70%;
  left: 25%;
  animation: float-element 7s ease-in-out infinite 1s;
}

.element-3 {
  top: 30%;
  right: 20%;
  animation: float-element 9s ease-in-out infinite 2s;
}

.element-4 {
  bottom: 20%;
  right: 25%;
  animation: float-element 6s ease-in-out infinite 3s;
}

@keyframes float-element {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-15px) translateX(10px); }
  50% { transform: translateY(0) translateX(20px); }
  75% { transform: translateY(15px) translateX(10px); }
}

.element-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(147, 51, 234, 0.5);
  animation: element-pulse 2s ease-out infinite;
}

@keyframes element-pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
      radial-gradient(circle at 50% 50%, transparent 60%, rgba(147, 51, 234, 0.1) 70%, transparent 80%),
      radial-gradient(circle at 50% 50%, transparent 30%, rgba(147, 51, 234, 0.05) 40%, transparent 50%);
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  animation: fade-in 1s ease-out 2s forwards;
  opacity: 0;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.mouse {
  width: 30px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  position: relative;
}

.wheel {
  width: 6px;
  height: 6px;
  background-color: #9333ea;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll 2s infinite;
}

@keyframes scroll {
  0% { transform: translateX(-50%) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(20px); opacity: 0; }
}

.scroll-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Section Badge */
.section-badge {
  display: inline-block;
  background: rgba(147, 51, 234, 0.1);
  border: 1px solid rgba(147, 51, 234, 0.2);
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #c084fc;
}

/* Carousel Section */
.carousel-section {
  padding: 6rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, #9333ea, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1.125rem;
  color: #a3a3a3;
}

.carousel-container {
  position: relative;
}

.custom-carousel :deep(.el-carousel__indicators) {
  bottom: -3rem;
}

.custom-carousel :deep(.el-carousel__indicator--horizontal button) {
  width: 3rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  background-color: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.custom-carousel :deep(.el-carousel__indicator--horizontal.is-active button) {
  background-color: #9333ea;
  width: 4rem;
}

.custom-carousel :deep(.el-carousel__arrow) {
  background-color: rgba(147, 51, 234, 0.7);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
}

.custom-carousel :deep(.el-carousel__arrow:hover) {
  background-color: rgba(147, 51, 234, 1);
}

.carousel-item {
  padding: 2rem;
  border-radius: 1.5rem;
  overflow: hidden;
}

.carousel-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.carousel-content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
  border-radius: 1rem;
  overflow: hidden;
}

.service-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  padding: 2.5rem;
  width: 100%;
  max-width: 500px;
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(147, 51, 234, 0.2);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.icon-container {
  position: relative;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(192, 132, 252, 0.2));
  border-radius: 1rem;
}

.service-icon {
  color: #9333ea;
  z-index: 2;
  position: relative;
}

.icon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.service-badge {
  background: linear-gradient(90deg, #9333ea, #c084fc);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.card-body {
  margin-bottom: 2rem;
}

.service-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #f5f5f5;
}

.service-description {
  color: #a3a3a3;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.feature-list {
  margin-bottom: 1.5rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  animation: slide-in 0.5s ease-out forwards;
  opacity: 0;
  transform: translateX(-20px);
}

@keyframes slide-in {
  to { opacity: 1; transform: translateX(0); }
}

.check-icon {
  color: #10b981;
  flex-shrink: 0;
}

.service-metrics {
  display: flex;
  gap: 2rem;
}

.metric {
  text-align: center;
}

.metric-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #9333ea;
}

.metric-label {
  font-size: 0.75rem;
  color: #a3a3a3;
}

.card-footer {
  display: flex;
  gap: 1rem;
}

.explore-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(90deg, #9333ea, #c084fc);
  color: white;
  border: none;
  border-radius: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.explore-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(147, 51, 234, 0.3);
}

.button-icon {
  transition: transform 0.3s ease;
}

.explore-button:hover .button-icon {
  transform: translateX(4px);
}

.decorative-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-icons {
  position: absolute;
  width: 100%;
  height: 100%;
}

.sparkle, .star, .zap {
  position: absolute;
  color: #9333ea;
  opacity: 0.6;
  animation: float 4s ease-in-out infinite;
}

.sparkle {
  top: 20%;
  right: 20%;
  animation-delay: 0s;
}

.star {
  top: 70%;
  left: 15%;
  animation-delay: 1s;
}

.zap {
  top: 40%;
  right: 10%;
  animation-delay: 2s;
}

/* Carousel Navigation */
.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 4rem;
}

.carousel-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-nav-item.active {
  background: rgba(147, 51, 234, 0.1);
  border-color: rgba(147, 51, 234, 0.3);
}

.carousel-nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.nav-icon {
  color: #9333ea;
}

.nav-text {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Features Section */
.features-section {
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.feature-hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(147, 51, 234, 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover .feature-hover-effect {
  opacity: 1;
}

.feature-icon {
  display: inline-flex;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(192, 132, 252, 0.2));
  border-radius: 50%;
  margin-bottom: 1.5rem;
  color: #9333ea;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #f5f5f5;
}

.feature-description {
  color: #a3a3a3;
  line-height: 1.6;
}

/* Stats Section */
.stats-section {
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #0a0a0a 0%, #111111 100%);
}

.stats-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.stats-text {
  text-align: center;
  max-width: 600px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  width: 100%;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border-color: rgba(147, 51, 234, 0.3);
}

.stat-icon {
  display: inline-flex;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(192, 132, 252, 0.2));
  border-radius: 50%;
  margin-bottom: 1rem;
  color: #9333ea;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 0.5rem;
}

.stat-name {
  font-size: 1rem;
  color: #a3a3a3;
  margin-bottom: 1rem;
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
}

.stat-trend.positive {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.stat-trend.negative {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Testimonials Section */
.testimonials-section {
  padding: 6rem 2rem;
}

.testimonials-slider {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.testimonial-carousel :deep(.el-carousel__container) {
  height: 100%;
}

.testimonial-carousel :deep(.el-carousel__item) {
  padding: 1rem;
}

.testimonial-carousel :deep(.el-carousel__arrow) {
  background-color: rgba(147, 51, 234, 0.7);
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.testimonial-carousel :deep(.el-carousel__arrow:hover) {
  background-color: rgba(147, 51, 234, 1);
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(147, 51, 234, 0.1);
}

.testimonial-rating {
  margin-bottom: 1rem;
}

.star-icon {
  color: rgba(255, 255, 255, 0.2);
  margin-right: 0.25rem;
}

.star-icon.filled {
  color: #f59e0b;
}

.testimonial-content {
  flex: 1;
  margin-bottom: 1.5rem;
}

.quote-icon {
  color: #9333ea;
  margin-bottom: 1rem;
}

.testimonial-text {
  color: #f5f5f5;
  line-height: 1.6;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #9333ea, #c084fc);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.author-name {
  font-weight: 600;
  color: #f5f5f5;
}

.author-role {
  font-size: 0.875rem;
  color: #a3a3a3;
}

.testimonial-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.testimonial-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #9333ea;
}

.stat-label {
  font-size: 0.875rem;
  color: #a3a3a3;
}

/* CTA Section */
.cta-section {
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
  text-align: center;
}

.cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, #9333ea, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-subtitle {
  font-size: 1.125rem;
  color: #a3a3a3;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.primary-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: linear-gradient(90deg, #9333ea, #c084fc);
  color: white;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.primary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(147, 51, 234, 0.3);
}

.secondary-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-cta:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

:deep(.custom-dialog) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(100, 181, 246, 0.2);
  border-radius: 5px;
  box-shadow: 0 8px 25px rgba(100, 181, 246, 0.15);
  padding: 0;


  .el-dialog__header {
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.08), rgba(144, 202, 249, 0.05));
    border-bottom: 1px solid rgba(100, 181, 246, 0.1);

    .el-dialog__title {
      color: #2c3e50;
      font-weight: 600;
    }
  }

  .el-dialog__body {
    padding: 20px;
  }
}



/* Responsive Design */
@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .primary-cta, .secondary-cta {
    width: 100%;
    max-width: 300px;
  }
}


/* Enhanced Particle Styles - Only adding new particle effects */
.twinkle-particle {
  position: absolute;
  background-color: rgba(147, 51, 234, 0.6);
  border-radius: 50%;
  animation: twinkle infinite ease-in-out;
}

.drift-particle {
  position: absolute;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.4) 0%, rgba(147, 51, 234, 0.2) 70%, transparent 100%);
  border-radius: 50%;
  animation: drift infinite linear;
}

.line-particle {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.3), transparent);
  animation: line-fade infinite ease-in-out;
}

.pulse-particle {
  position: absolute;
  background-color: rgba(168, 85, 247, 0.5);
  border-radius: 50%;
  animation: pulse-glow infinite ease-in-out;
}

/* New Particle Animations */
@keyframes twinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes drift {
  0% {
    transform: translateX(-20px) translateY(0px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 20px)) translateY(-100px);
    opacity: 0;
  }
}

@keyframes line-fade {
  0%, 100% {
    opacity: 0;
    transform: scaleX(0);
  }
  50% {
    opacity: 0.6;
    transform: scaleX(1);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
    box-shadow: 0 0 5px rgba(147, 51, 234, 0.3);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.5);
    box-shadow: 0 0 15px rgba(147, 51, 234, 0.6);
  }
}

/* Base particle styles that might be missing */
.particle {
  position: absolute;
  background-color: rgba(147, 51, 234, 0.4);
  border-radius: 50%;
  animation: float infinite ease-in-out;
  pointer-events: none;
}

/* Ensure particles container is properly positioned */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Base animation for original particles */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.8;
  }
  50% {
    transform: translateY(0px) translateX(20px);
    opacity: 0.5;
  }
  75% {
    transform: translateY(20px) translateX(10px);
    opacity: 0.8;
  }
}

/* Ensure animated background is properly positioned */
.animated-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
</style>